<template>
  <div class="Alarm">
    <div class="page-head">
      <div class="page-title">告警记录</div>
      <div class="page-tool">
        <search-input placeholder="设备名称或CNC ID搜索" @search="searchChange" />
      </div>
    </div>
    <div class="page-body">
      <div class="table_data">
        <el-table :data="tableData" stripe border :fit="true" :height="$tableHeight">
          
          <el-table-column
            prop="alias"
            label="设备名称"
          >
          </el-table-column>
          <el-table-column
            prop="cnc"
            label="CNC ID"
          >
          </el-table-column>
          <el-table-column
            prop="floor"
            label="楼层"
          >
          </el-table-column>
          <el-table-column
            prop="branch"
            label="车间"
          >
          </el-table-column>
          <el-table-column
            prop="line"
            label="条线"
          >
          </el-table-column>
          <el-table-column
            prop="seg"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            prop="group_name"
            label="所属分组"
          >
          </el-table-column>
          <el-table-column
            prop="serial"
            label="设备识别号"
          >
          </el-table-column>
          <el-table-column
            prop="attime"
            label="告警时间"
          >
          </el-table-column>
          <el-table-column
            prop="except_reason"
            label="原因"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="page-footer">
        <pagina-tion
          class="page-pager"
          v-show="total >= 0"
          :background="true"
          :total="total"
          :offset.sync="offset"
          :limit.sync="limit"
          @pagination="getChangePage"
          @sizeChange="getSizePage"
        />
      </div>
    </div>

  </div>
</template>

<script>
import * as api from "@/api";
import { limit, smallLimit } from "@/consts/consts";
import searchInput from "@/components/libs/searchInput";
import paginaTion from "@/components/libs/paginaTion";


export default {
    components:{
    searchInput,
    paginaTion 
  },
  data() {
    return {
      limit,
      total: 0,
      offset: 0,
      tableData: [],
    }
  },


  methods: {
    
    searchChange(e) {
      this.search = e;
      this.offset = 0;
      this.getList();
    },

    getChangePage(val) {
      this.offset = val.offset;
      this.getList();
    },

    getSizePage(val) {
      this.offset = 0
      this.getList();
    },

    // 列表
    async getList() {
      const { code, data, total } = await api.alarm(this).getList({
        offset: this.offset,
        limit: this.limit,
      });
      if (code === 0) {
        this.tableData = data
        this.total = total
      }
    },


  },
  created() {
    this.getList();
  },
};
</script>

<style lang="stylus">
.Alarm {

}

</style>